<template>
	<view class="home">
		<scroll-view scroll-x class="navscroll">
			<view class="item" :class="index==navindex? 'active':''" 
			v-for="(item,index) in navarr" @click="clicknav(index,item.id)" 
			:key="item.id">{{item.classname}}</view>
		</scroll-view>
		<view class="content">
			<view class="row" v-for="item in newsarr" :key="item.id">
				<newsbox :item="item" @click.native="godetail(item)"></newsbox>
			</view>
		</view>
		<view class="nodata" v-if="newsarr.length==0">
			<image src="../../static/images/没有数据.png" mode="widthFix"></image>
		</view>
		<view class="loading" v-if="newsarr.length">
			<view v-if="loading==0"></view>
			<view v-else-if="loading==1">数据加载中...</view>
			<view v-else="loading==2">没有更多...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				navindex:0,
				navarr:[],
				newsarr:[],
				currentpage:1,
				loading:0    //0是默认，1是加载中  2是没有更多
			}
		},
		onLoad() {
			this.getnavdata();
			this.getnewsdata();
		},
		onReachBottom() {
			console.log('到底');
			if(this.loading==2){
				return;
			}
			this.currentpage++;
			this.loading=1;
			this.getnewsdata()
		},
		methods: {
			// 点击导航切换
			clicknav(index,id){
				this.navindex=index;
				console.log(id);
				this.currentpage=1;
				this.newsarr=[];
				this.loading=0;
				this.getnewsdata(id);
			},
			// 跳转到详情页
			godetail(item){
				console.log(item)
				uni.navigateTo({
					url:`/pages/detail/detail?cid=${item.classid}&id=${item.id}`
				})
			},
			// 获取导航列表数据
			getnavdata(){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/navlist.php",
					success: (res) => {
						console.log(res);
						this.navarr=res.data
					}
				})
			},
			// 获取新闻列表的数据
			getnewsdata(id=50){
				uni.request({
					url:"https://ku.qingnian8.com/dataApi/news/newslist.php",
					data:{
						cid:id,
						page:this.currentpage
					},
					success: (res) => {
						console.log(res);
						if(res.data.length==0){
							this.loading=2
						}
						this.newsarr=[...this.newsarr,...res.data]
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navscroll{
		height: 100rpx;
		background: #eaeaea;
		white-space: nowrap;
		position: fixed;
		// top:0;
		// left:0;
		z-index: 10;
		/deep/::-webkit-scrollbar{
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
		.item{
			font-size: 40rpx;
			display: inline-block;
			line-height: 100rpx;
			padding: 0 30rpx;
			color: #333;
			&.active{
				color: #58d757;
			}
		}
	}
	.content{
		padding: 30rpx;
		padding-top: 100rpx;
		.row{
			border-bottom: 1px dotted #efefef;
			padding: 15rpx 0;
		}
	}
	.nodata{
		display: flex;
		justify-content: center;
		image{
			width: 450rpx;
			// height: 300rpx;
		}
	}
	.loading{
		text-align: center;
		font-size: 26rpx;
		color: #888;
		view{
			padding: 20rpx 0;
		}
	}
</style>
